<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" :back-text-style="backText" title-color="#FFFFFF" :background="barbg" back-text="返回"
		 title="车队负责人管理">
			<view class="navbar-right" slot="right" @click="addUser()">添加</view>
		</u-navbar>
		<view class="content">
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<u-row gutter="16">
					<u-col span="3" @click="details(item)">
						<view class="item-box">
							<image :src="item.logo" mode="scaleToFill" lazy-load="true" v-if="item.logo"></image>
							<image src="../../../static/user.jpg" mode="scaleToFill" lazy-load="true" v-else></image>
						</view>
					</u-col>
					<u-col span="6" @click="details(item)">
						<view class="item-box">
							<view class="item-text">
								姓名：
								<text class="content-text">{{ item.name }}</text>
							</view>
							<view class="item-text">
								电话：
								<text class="content-text">{{ item.phone }}</text>
							</view>
							<!-- 							<view class="item-text">
								车队：
								<text class="content-text">{{ item.porject }}</text>
							</view> -->
						</view>
					</u-col>
					<u-col span="3" @click="details(item)">
						<view class="item-box item-buttom">
							<image class="left-img" src="../../../static/right.png" mode=""></image>
						</view>
					</u-col>
				</u-row>
			</view>

			<!-- 下拉加载显示 -->
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus" :contentText="text"></uni-load-more>
			</view>

			<view class="divider">
				<u-divider bg-color="#eaf1ff">END</u-divider>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js'
	export default {
		data() {
			return {
				barbg: {
					background: '#5c92ff'
				},
				backText: {
					color: '#FFFFFF'
				},
				loadStatus: 'loading',
				isLoadMore: false,
				isOnshow: true,
				prevPage: null,
				text: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: ""
				},
				dataList: [],
				queryInfo: {
					page: 1,
					count: 8,
					roleId: 3,
				}
			};
		},
		components: {},
		onShow() {
			var pages = getCurrentPages();
			this.prevPage = pages[pages.length - 1];
			if (this.prevPage.brand === true) {
				this.screenUserData()
			}
			if (this.prevPage.delete === true) {
				this.screenUserData()
			}
			// console.log(brand)
			if (this.isOnshow === true) {
				this.screenUserData()
			}

		},
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.queryInfo.page += 1
				this.screenUserData()
			}
		},

		methods: {
			addUser() {
				uni.navigateTo({
					url: './addUser/index'
				});
			},
			details(item) {
				let url = '/pages/project/user/details/index'
				// console.log(id)
				let info = {}
				info.name = item.name
				info.id = item.id
				info.phone = item.phone
				info.username = item.username
				info.logo = item.logo
				this.$urlTo.togo(url, info)
				// uni.navigateTo({
				// 	url: './details/index?id='+id
				// });
			},
			screenUserData() {
				// this.dataList = []
				if (this.prevPage.delete === true) {
					this.queryInfo.page = 1
					this.queryInfo.count = 8
				}
				// this.queryInfo.projectId = uni.getStorageSync('id')
				getUserInfo(this.queryInfo).then(res =>{
					// console.log(res)
					if (res.code === 1) {
						if (res.result.data) {
							if (this.prevPage.brand === true) {
								// bug 如果添加前count刚刚到最大，添加会进入新的page,无法被查询到
								// if (res.result.data.length === this.queryInfo.count) {
								// 	this.queryInfo.page += 1
								// 	getUserInfo(this.queryInfo).then(res => {
								// 		// this.dataList = this.dataList.concat(res.result.data.slice(res.result.data.length - 1))
								// 		this.dataList.splice(0, 0, res.result.data.slice(res.result.data.length - 1)[0])
								// 	})
								// }
								this.dataList.splice(0, 0, res.result.data.slice(res.result.data.length - 1)[0])
								this.prevPage.brand = false
								// this.dataList.reverse()
							} else if (this.prevPage.delete === true) {
								this.dataList = res.result.data
								this.prevPage.delete = false
							} else {
								this.dataList = this.dataList.concat(res.result.data)
							}
							// this.dataList = this.dataList.concat(res.result.data)
							if (res.result.data.length < this.queryInfo.count) {
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
						if (this.page > 1) {
							this.page -= 1
						}
					}
					if (this.isOnshow === true) {
						this.isOnshow = false
					}
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		padding: 0px 40rpx;
		color: #ffffff;
	}

	.content {
		.item {
			padding: 20rpx;
			background-color: #ffffff;
			margin-bottom: 1rpx;

			.item-box {
				height: 150rpx;

				image {
					width: 100%;
					height: 100%;
				}

				.item-text {
					font-size: 30rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 1rpx;
					color: #b1b8c8;
					line-height: 80rpx;
				}

				.content-text {
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 1px;
					color: #2c3240;
					font-weight: bold;
				}
			}

			.item-buttom {
				line-height: 150rpx;
				text-align: right;

				.left-img {
					width: 20rpx;
					height: 29rpx;
				}
			}
		}

		.item:active {
			background-color: rgb(235, 237, 238);
		}
	}

	.divider {
		margin-top: 50rpx;
	}
</style>
